<template>
    <!-- <video>
        <source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type="application/x-mpegURL">
    </video> -->
    <div>
        <div width="500px" height="500px">
            <canvas id="canvas" class="canvas" style="border:1px solid black;"></canvas>
        </div>
        <video controls>
            <source src='https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8' type="application/x-mpegURL">
        </video>
    </div>
</template>

<script>
export default {
    mounted() {
        let canvas = document.querySelector('canvas')
        let ctx
        if (canvas.getContext) {
            ctx = canvas.getContext('2d')
            canvas.width = window.innerWidth * 2
            canvas.height = window.innerHeight * 2
            let video = document.querySelector('video')
            video.play()
            // ctx.fillStyle = 'green'
            // ctx.fillRect(0, 0, 500, 500)
            console.log('video', ctx)
            // video.addEventListener('play', () => {
            // alert('play')
            setInterval(() => {
                ctx.drawImage(video, 0, 0, 500, 500)
            }, 20)
            // })
        }
    }
}
</script>
